<template>
  <div class="body2">
    <div class="leftDIV">
      <div class="logo">
        <div class="title">ORDER聚造</div>
        <img class="imgs" src="../assets/-e-圆角矩形 7.png" />
      </div>
      <div>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="transparent"
          text-color="#fff"
          :router="true"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>首页管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/index/banners">轮播图管理</el-menu-item>
              <el-menu-item index="/index/category">分类区管理</el-menu-item>
              <el-menu-item index="/index/recommend">为你推荐管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/index/productCategory">分类管理</el-menu-item>
              <el-menu-item index="/index/brands">品牌管理</el-menu-item>
              <el-menu-item index="/index/product">商品管理</el-menu-item>
              <el-menu-item index="/index/sku">单品管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/index/article">
            <template slot="title" >
              <i class="el-icon-location"></i>
              <span>新闻管理</span>
            </template>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="rightDIV">
      <div class="tingbudiv">
        <div class="shezi">{{$route.meta.title}}</div>
        <div class="rightdiv">
          <img src="../assets/图层 17.png" alt="" />
          <el-tooltip>
            <div slot="content" @click="dialogFormVisible = true">修改密码</div>
            <div class="text">
              <span style="color: #eab924; padding-right: 5px">超级管理员</span
              >小王，您好！
            </div>
          </el-tooltip>

          <div class="back" @click="logout">退出</div>
        </div>
      </div>
      <router-view></router-view>


    </div>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
      <el-form :model="form" ref="form" :rules="rules" label-width="100px">
        <el-form-item
          label="原密码"
          prop="passWord"
          style="margin-bottom: 20px"
        >
          <el-input type="passWord" v-model="form.passWord"></el-input>
        </el-form-item>
        <el-form-item
          label="新密码"
          prop="newPassWord"
          style="margin-bottom: 20px"
        >
          <el-input type="passWord" v-model="form.newPassWord"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="reNewPassWord">
          <el-input type="passWord" v-model="form.reNewPassWord"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="dialogFormVisible = false"
          style="width: 50px; height: 30px"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click="changePassWord"
          style="width: 50px; height: 30px"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import md5 from 'js-md5'
//import HelloWorld from './components/HelloWorld.vue'
export default {
  name: "index",
  components: {
    //HelloWorld
  },
  data() {
    return {
      dialogFormVisible: false,
      form: {
        passWord: "",
        newPassWord: "",
        reNewPassWord: "",
      },
      rules:{
          passWord:[
              {required:true,message:'请输入原密码',trigger:'blur'}
          ],
          newPassWord:[
              {required:true,message:'请输入新密码',trigger:'blur'}
          ],
          reNewPassWord:[
              {required :true,message:"请重复输入新密码",trigger:'blur'},
              {validator:(rule,value,callback)=>{
                  if(value === ''){
                      callback(new Error("请再次输入密码"));
                  }else if(value !== this.form.newPassWord){
                      callback(new Error("两次输入密码不一致！"));
                  }else{
                      callback()
                  }
              },trigger:'blur'}
          ]
      }
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      this.$confirm("是否退出登录？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: "/admin/logout",
        }).then((res) => {
          if (res.errorMsg) {
            this.$message.error(res.errorMsg);
          } else {
            localStorage.removeItem("token");
            localStorage.removeItem("user");
            location.href = "#/Login";
          }
        });
      });
    },
    changePassWord() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$http({
            url: "/admin/changePassWord",
            method: "POST",
            data: {
              passWord: md5(this.form.passWord),
              newPassWord: md5(this.form.newPassWord),
            },
          }).then((res) => {
              this.dialogFormVisible = false
            if (!res.errorMsg) {
              this.$message({
                message: "修改密码成功",
                type: "success",
                duration:3000
              });
              setTimeout(()=>{
                  location.href = "#/login";
              },3000)
            }
          });
        }
      });
    },
  },
  created() {
    //从缓存中获取用户 信息
    let user = localStorage.getItem("user");
    if (!user) {
      location.href = location.origin + "#/login";
    } else {
      //解析为对象
      user = JSON.parse(user);
      //设置头像
      this.photo = user.avatarUrl || require("../assets/图层 17.png");
      //设置昵称
      this.nickName = user.nickName || "小王";
    }
  },
  mounted() {},
};
</script>

<style >
* {
  margin: 0px;
  padding: 0px;
}
.body2 {
  height: 980px;
  display: flex;
}
.leftDIV {
  width: 200px;
  background-image: url("../assets/-e-图层 19.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.logo {
  display: flex;
  width: 100%;
  text-align: center;
  margin-top: 42px;
  align-items: center;
  font-size: 23px;
}
.title {
  color: #ffffff;
  margin: 0 auto;
}
.imgs {
  width: 12px;
  height: 10px;
}

.rightDIV {
  width:1685px;
  background-color: #eff6fc;
}
.tingbudiv {
  width: 100%;
  height: 48px;
  display: flex;
  margin-top: 42px;
  align-items: center;
  justify-content:space-between
}
.shezi {
  margin-left: 50px;
  color: #2c2c2c;
  font-size: 16px;
  font-weight: 800;
}
.rightdiv {
  height: 48px;
  width: 290px;
  display: flex;
  align-items: center;
  margin-right: 30px;
}
.text {
  font-size: 14px;
  margin-left: 8px;
}
.back {
  width: 71px;
  height: 29px;
  background: #f56c6c;
  border-radius: 15px 15px 15px 15px;
  opacity: 1;
  line-height: 29px;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
}
.riqi {
  width: auto;
  height: 62px;
  margin: 22px 25px 13px 25px;
  background: #ffffff;
  display: flex;
  align-items: center;
}
.riqitext {
  margin-left: 60px;
  color: #7c7c7d;
  font-size: 14px;
  padding: 30px;
}
.shurukuang {
  height: 46px;
  width: 196px;
  border: 0.5px solid rgb(124, 124, 125, 0.3);
  border-radius: 6px;
  outline: none;
  padding-left: 20px;
  color: #ffffff;
}
.sosuo {
  width: 73px;
  height: 32px;
  background: #63b0ff;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  text-align: center;
  line-height: 32px;
  margin-left: 35px;
  font-size: 12px;
  color: #ffffff;
}
.maxtabe {
  height: 330px;
  width: auto;
  background-color: #ffffff;
  margin: 22px 25px auto 25px;
}
.tables {
  height: 300px;
  width: 1500px;
  background-color: #ffffff;
  margin: 22px 25px auto 0px;
  text-align: left;
}
table tr td {
  border-bottom: 1px solid rgb(124, 124, 125, 0.2);
  padding-left: 10px;
}
table tr th {
  border-bottom: 1px solid rgb(124, 124, 125, 0.2);
  padding-left: 10px;
}
.button {
  display: flex;
}
.xiamian {
  width: 192px;
  height: 42px;
  margin-left: 52px;
  padding-left: 15px;
  background-color: #ffffff;
  align-items: center;
  display: flex;
}
.yeshu {
  margin-left: 15px;
  border: 0.5px solid black;
  padding-left: 10px;
  padding-right: 10px;
}
</style>
